<script setup lang="ts">
import MenuTitle from "@/views/qq/home/home-bottom/menu/MenuTitle.vue";
import MenuTitleInside from "@/views/qq/home/home-bottom/menu/MenuTitleInside.vue";
import achievementImg from '@/views/qq/home/home-bottom/menu/img/achievement.jpg';
import carCollectionImg from '@/views/qq/home/home-bottom/menu/img/car-collection.jpg';
import handbookImg from '@/views/qq/home/home-bottom/menu/img/handbook.jpg';
import talentImg from '@/views/qq/home/home-bottom/menu/img/talent.jpg';
import partnerImg from '@/views/qq/home/home-bottom/menu/img/partner.jpg';
import teacherImg from '@/views/qq/home/home-bottom/menu/img/teacher.jpg';
import taskImg from '@/views/qq/home/home-bottom/menu/img/task.jpg';
import {ref} from "vue";
import {useRouter} from "vue-router";
import {pushTo} from "@/router";
import {RouterName} from "@/utils/enum-type";

const router = useRouter()

const collectArr = [
  {id: 1, src: achievementImg, name: '成就', path: 'collection/achievement'},
  {id: 2, src: handbookImg, name: '图鉴', path: 'collection/handbook'},
  {id: 3, src: carCollectionImg, name: '藏馆', path: 'collection/car-collection'},
  {id: 4, src: talentImg, name: '天赋', path: 'collection/talent'}
];
const socialArr = [
  {id: 1, src: partnerImg, name: '伴侣', path: 'collection/partner'},
  {id: 2, src: teacherImg, name: '师徒', path: 'collection/teacher'},
]

const menuList = [
  {id: 1, name: '车队', enName: 'GUILD'},
  {id: 2, name: '社交', enName: 'SOCIAL', height: '2em', children: socialArr},
  {id: 3, name: '收集', enName: 'COLLECTION', height: '3.3em', children: collectArr},
  {id: 4, name: '宠物', enName: 'PET'},
  {id: 5, name: '车库', enName: 'GARAGE'},
  {id: 6, name: '背包', enName: 'BAG'},
]
// 展示modal
const isSocialShow = ref(false)
const isCollectionShow = ref(false)

// 检查数组是否不为空
function checkArr(arr: [] | undefined) {
  return arr && arr.length > 0
}

// 检查是否展示
function checkShow(enName: string) {
  if (enName === 'SOCIAL' && isSocialShow.value) {
    return true
  } else if (enName === 'COLLECTION' && isCollectionShow.value) {
    return true
  }
  return false
}

// 点击菜单
function handleClick(item: { enName: string; }) {
  switch (item.enName) {
    case 'GUILD':
      console.log('车队')
      break;
    case 'SOCIAL':
      isSocialShow.value = !isSocialShow.value
      isCollectionShow.value = false
      return
    case 'COLLECTION':
      isCollectionShow.value = !isCollectionShow.value
      isSocialShow.value = false
      return;
    case 'PET':
      console.log('宠物')
      break;
    case 'GARAGE':
      console.log('车库')
      break;
    case 'BAG':
      console.log('背包')
      pushTo({name: RouterName.QQBag})
      break;
  }
  closeOthers()
}

function closeOthers() {
  isSocialShow.value = false;
  isCollectionShow.value = false
}

</script>
<template>
  <div class="footer">
    <ul class="list">
      <li
          v-for="item in menuList"
          @click="handleClick(item)"
      >
        <MenuTitle
            :name="item.name"
            :enName="item.enName"
            :with-arrow="checkArr(item.children)"
            :arrow-open="checkShow(item.enName)"
        >
          <template v-if="checkArr(item.children)">
            <MenuTitleInside
                v-show="checkShow(item.enName)"
                :src-arr="item.children"
                :height="item.height"
            />
          </template>
        </MenuTitle>
      </li>
    </ul>
    <img :src="taskImg" alt="" class="task" @click="pushTo({name:RouterName.QQTask})"/>
  </div>
</template>
<style scoped lang="scss">
.footer {
  display: flex;

  .list {
    display: flex;

    li::before {
      content: " ";
      position: absolute;
      border-left: 1px solid rgba(255, 255, 255, 0.2);
      left: 0;
      top: 30%;
      height: 40%;
    }
  }

  .task {
    height: 4em;
    transform: translateY(-1em);
    margin-right: 2em;
    margin-left: 1em;
    cursor: pointer;
  }
}
</style>